<!--
 * @Author: ChunLai
 * @Date: 2022-03-29 17:06:31
 * @LastEditTime: 2025-09-02 15:51:15
 * @Description: 用户信息模块
 * @FilePath: \02.bldinsure\src\views\index\feecount\UserModule.vue
-->
<template>
  <div class="pre-count-user-module">
    <!-- 投保人信息 -->
    <div class="tbr-user-module">
      <div class="ms-pre-count-head">
        投保人信息
        <span
          :class="enfold ? 'ms-row2-icon' : 'ms-row-icon'"
          style="margin-left: 8px"
          @click="enfold = !enfold"
        ></span>
      </div>
      <div class="form-main-box">
        <AppntFactors ref="tbrFactorRef" :enfold="enfold" />
      </div>
    </div>
    <div class="bbr-user-module mt10" v-if="bbrRefresh">
      <div class="ms-pre-count-head">
        被保险人信息
        <p class="insure-age" v-if="isureAgeTip">投保年龄：{{ isureAgeTip }}</p>
      </div>
      <div
        class="form-main-box"
        v-for="(item, index) in bbrMultList"
        :key="`bbr-pre${index}`"
      >
        <BbrFactors :ref="`bbrFactor${index}Ref`" :pindex="index" />
      </div>
    </div>
    <!-- <div class="rule-warn-msg" v-html="ruleWarn" v-if="ruleWarn"></div> -->
    <div class="addCell" @click="addUserItem()" v-if="addMoreBtn">
      <MsImgIcon name="add" />
      <span class="ft15 ml4 lh_20">添加被保人</span>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import AppntFactors from "./AppntFactors";
import BbrFactors from "./BbrFactors";

export default {
  name: "UserModule",
  data() {
    return {
      popConfig: {},
      index: 0,
      enfold: true,
    };
  },
  components: {
    AppntFactors,
    BbrFactors,
  },
  computed: {
    ...mapGetters({
      applicant: "insert/applicant",
      bbrMultList: "insert/bbrMultList",
      bbrMaxNum: "page/bbrMaxNum",
      ruleWarn: "page/ruleWarn",
      planModule: "home/planModule",
      bbrRefresh: "common/bbrRefresh",
    }),
    isureAgeTip() {
      const obj2 = this.planModule.find((ele) => ele.label === "投保年龄");
      return obj2 ? obj2.value : "";
    },
    addMoreBtn() {
      let res = true;
      const numLen = this.bbrMultList.length;
      if (numLen >= this.bbrMaxNum) {
        res = false;
      }
      return res;
    },
  },
  created() {},
  mounted() {},
  methods: {
    async validateForm() {
      let flag = { status: true };
      /**投保人*/
      flag = await this.$refs.tbrFactorRef.saveForm();
      /**被保人*/
      const selfNum = this.bbrMultList.filter((item, index) =>
        this.bbrMultList.some(
          (obj, i) => i !== index && obj.idNum === item.idNum
        )
      );
      // console.log("selfNum", selfNum);
      if (selfNum && selfNum.length > 1) {
        flag = { status: false };
        this.$store.commit("common/SET_FIELD_MEAN_CONT", {
          label: `规则校验`,
          desc: `被保险人存在多个相同证件号，请确认`,
        });
      }
      const bnfLen = this.bbrMultList.length;
      for (let i = 0; i < bnfLen; i++) {
        const flag2 = await this.$refs[`bbrFactor${i}Ref`][0].saveForm();
        if (!flag2.status) {
          flag = flag2;
          break;
        }
      }
      return flag;
    },
    addUserItem() {
      this.$store.dispatch("insert/addNewBbr");
    },
  },
};
</script>

<style lang="less" scoped>
.pre-count-user-module {
  width: 100%;
  padding: 0 5px 14px 5px;
}
.form-main-box {
  border-radius: 4px;
  padding: 0 10px;
  margin-top: 4px;
  background-color: #ffffff;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
  /deep/.van-cell {
    padding-left: 5px;
    padding-right: 5px;
    &::after {
      left: 5px;
      right: 5px;
    }
  }
  /deep/.van-field__error-message {
    margin-top: 0;
    text-align: right;
  }
}
.addCell {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: 40px;
  color: #43cf7c;
  margin: 20px auto 0;
  border-radius: 10px;
  font-family: MiSans;
  background: #ffffff;
  border: 1px dashed #43cf7c;
}
.insure-age {
  color: #c0c4cc;
  font-weight: 400;
  font-size: 12px;
  font-family: Microsoft Yahei, sans-serif;
  margin-left: 10px;
}
</style>
